<template>
  <div class="aui-card--fill scroll-box card-box">
    <div class="mod-sys__menu pane-shell">
      <el-form :inline="true"
               :model="dataForm"
               class="align-right"
               @keyup.enter.native="getDataList()">
        <el-form-item>
          <el-button type="primary"
                     plain
                     icon="el-icon-plus"
                     v-if="$hasPermission('tb:thirdPlatform:addThird')"
                     @click="updateHandle()">{{ $t('add') }}</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="dataListLoading"
                :data="dataList"
                border
                style="width: 100%;height: 100%">
        <el-table-column prop="sort"
                         :label="$t('menu.sort')"
                         header-align="center"
                         width="80"
                         align="center"></el-table-column>
        <el-table-column prop="type"
                         :label="$t('menu.type')"
                         header-align="center"
                         min-width="150"
                         align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.type === 0">HR</span>
            <span v-if="scope.row.type === 1">OA</span>
            <span v-if="scope.row.type === 2">loT</span>
            <span v-if="scope.row.type === 3">短信</span>
          </template>
        </el-table-column>
        <el-table-column prop="manufacturers"
                         label="厂家"
                         header-align="center"
                         min-width="150"
                         align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.manufacturers === 0">北森</span>
            <span v-if="scope.row.manufacturers === 1">泛微</span>
            <span v-if="scope.row.manufacturers === 2">企业微信</span>
            <span v-if="scope.row.manufacturers === 3">大华</span>
            <span v-if="scope.row.manufacturers === 4">海康</span>
            <span v-if="scope.row.manufacturers === 5">阿里云</span>
            <span v-if="scope.row.manufacturers === 6">ITC网络广播</span>
          </template>
        </el-table-column>
        <el-table-column prop="platformName"
                         label="平台名称"
                         header-align="center"
                         min-width="150"
                         align="center"></el-table-column>
        <el-table-column prop="serverAddress"
                         label="服务器地址"
                         header-align="center"
                         align="center"
                         min-width="150"
                         :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="platformParameter"
                         label="平台参数"
                         header-align="center"
                         align="center"
                         min-width="150"
                         :show-overflow-tooltip="true"></el-table-column>
        <el-table-column :label="$t('handle')"
                         fixed="right"
                         header-align="center"
                         align="center"
                         width="150">
          <template slot-scope="scope">
            <el-button type="text"
                       size="small"
                       v-if="$hasPermission('tb:thirdPlatform:updateThird')"
                       @click="updateHandle(scope.row.id)">{{ $t('update') }}</el-button>
            <el-button type="text"
                       size="small"
                       class="danger"
                       v-if="$hasPermission('tb:thirdPlatform:delThird')"
                       @click="deleteHandle({ id: scope.row.id })">{{ $t('delete') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :current-page="page"
                     :page-sizes="[10, 20, 50, 100]"
                     :total="total"
                     layout="total, sizes, prev, pager, next"
                     @size-change="pageSizeChangeHandle"
                     @current-change="pageCurrentChangeHandle">
      </el-pagination>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update ref="addOrUpdate"
                     @callBack="getDataList"></add-or-update>
    </div>
  </div>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import TableTreeColumn from '@/components/table-tree-column'
import AddOrUpdate from './add-or-update'
export default {
  mixins: [mixinViewModule],
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/tb/thirdPlatform/queryPage',
        deleteURL: '/tb/thirdPlatform/delThird',
        getDataListIsPage: true
      }
    }
  },
  components: {
    TableTreeColumn,
    AddOrUpdate
  },
  methods: {
    updateHandle (id) {
      this.openDialog('addOrUpdate', { id, list: this.dataList })
    }
  }
}
</script>
<style scoped lang="scss"></style>
